<template>
  <el-form ref="form" :model="form" label-position="top" class="filterform">
    <el-form-item label="昵称/备注：" class="mb-10">
      <el-select
        v-model="form.grouptype"
        placeholder=""
        size="small"
        class="mr-8"
        style="width: 126px"
      >
        <el-option label="含任意关键词" :value="1"></el-option>
        <el-option label="含所有关键词" :value="2"></el-option>
      </el-select>
      <el-input
        placeholder="可输入多个，按Enter确认"
        v-model="form.name"
        size="small"
        class="mt-3"
        style="width: 226px"
        @keyup.enter.native="handleAddLable"
      >
        <el-button
          slot="append"
          size="small"
          icon="el-icon-plus"
          @click="handleAddLable"
        ></el-button>
      </el-input>
    </el-form-item>
    <div v-if="form.labels.length" class="labelbox mt-5">
      <div
        class="labelitem c_text ml-5 mb-5"
        v-for="(item, index) in form.labels"
        :key="index"
      >
        {{ item }}
        <i class="el-icon-close commhover" @click="removeLable(index)"></i>
      </div>
    </div>
    <el-form-item label="企微标签：" class="mb-10">
      <el-select
        v-model="form.labeltype"
        placeholder=""
        size="small"
        class="mr-8"
        style="width: 126px"
      >
        <el-option label="含任意关键词" :value="1"></el-option>
        <el-option label="含所有关键词" :value="2"></el-option>
        <el-option label="未打所有标签" :value="3"></el-option>
      </el-select>
      <multiple-select
        size="small"
        placeholder="群标签"
        :width="`226px`"
        :isSelect="true"
        :receiverNameOpt="lableOpt"
      />
    </el-form-item>
    <el-form-item label="智能标签：" class="mb-10">
      <el-select
        v-model="form.labeltype"
        placeholder=""
        size="small"
        class="mr-8"
        style="width: 126px"
      >
        <el-option label="含任意关键词" :value="1"></el-option>
        <el-option label="含所有关键词" :value="2"></el-option>
        <el-option label="未打所有标签" :value="3"></el-option>
      </el-select>
      <multiple-select
        size="small"
        placeholder="智能标签"
        :width="`226px`"
        :isSelect="true"
        :receiverNameOpt="lableOpt"
      />
    </el-form-item>
    <el-form-item label="其他：" class="mb-10">
      <el-input
        value="按群查找"
        size="small"
        class="mr-8"
        style="width: 126px"
        placeholder=""
      />
      <el-select
        v-model="form.grouplabel"
        placeholder="请选择"
        size="small"
        clearable
        style="width: 226px"
      >
        <el-option label="有备注" :value="1"></el-option>
        <el-option label="无备注" :value="2"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="" class="mb-10">
      <el-input
        value="加好友时间"
        size="small"
        class="mr-8"
        style="width: 126px"
        placeholder=""
      />
      <el-date-picker
        v-model="form.times"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        style="width: 226px"
      >
      </el-date-picker>
    </el-form-item>

    <el-form-item label="" class="mb-10">
      <el-input
        value="是否有备注"
        size="small"
        class="mr-8"
        style="width: 126px"
        placeholder=""
      />
      <el-select
        v-model="form.grouplabel"
        placeholder="请选择"
        size="small"
        clearable
        style="width: 226px"
      >
        <el-option label="有备注" :value="1"></el-option>
        <el-option label="无备注" :value="2"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="" class="mb-10">
      <el-input
        value="性别"
        size="small"
        class="mr-8"
        style="width: 126px"
        placeholder=""
      />
      <el-select
        v-model="form.sex"
        placeholder="请选择"
        size="small"
        clearable
        style="width: 226px"
      >
        <el-option v-for="(item,index) in sexList" :key="index" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script>
import MultipleSelect from "@/components/MultipleSelect";
export default {
  data() {
    return {
      form: {
        grouptype: 1,
        name: "",
        labels: [],
        labeltype: 1,
        grouplabel: "",
        min: "",
        max: "",
      },
      visible: false,
      numberstr: "",
      lableOpt: [
        { value: 1, label: "客户等级", children: ["一般", "重要", "核心"] },
        { value: 2, label: "客户等级2", children: ["一般2", "重要2", "核心2"] },
      ],
      sexList:[
        {value:1, label:'男'},
        {value:2, label:'女'},
        {value:3, label:'未知'},
      ],
    };
  },
  components: {
    MultipleSelect,
  },
  methods: {
    submitNum() {
      this.numberstr = this.form.min + " ~ " + this.form.max;
      console.log("this.numberstr:", this.numberstr);
      this.visible = false;
    },

    handleAddLable() {
      if (this.form.name) {
        if (this.form.labels.includes(this.form.name)) {
          this.$message.warning("标签重复");
          return;
        }
        this.form.labels.push(this.form.name);
        this.form.name = "";
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.linebox {
  width: 36px;
}
.el-form {
  ::v-deep .el-form-item__label {
    color: rgba($color: #000000, $alpha: 0.45);
  }
}
</style>